import React, {Component} from 'react'
import {connect} from 'react-redux'

import './MenuItem.scss'
import {addSelectItem, minSelectItem} from '../../actions/menuAction.js'

class MenuItem extends Component{
  addSelectItem(){
    this.props.dispatch(addSelectItem({
      index: this.props._index
    }))
  }
  minSelectItem(){
    this.props.dispatch(minSelectItem({
      index: this.props._index
    }))
  }
  render(){
    let item = this.props.data
    return(
      <div className='menu-item'>
        <img className='img' src={item.picture} />
        <div className="menu-item-right">
          <p className='item-title'>
            {item.name}
          </p>
          <p className='item-desc two-line'>
            {item.description}
          </p>
          <p className='item-zan'>
            {item.praise_content}
          </p>
          <p className='item-price'>
            &yen;{item.min_price}/
            <span className='unit'>{item.unit}</span>
          </p>
        </div>
        <div className="select-content">
          {
            item.chooseCount > 0 
            ? <div className="minus" onClick={() => this.minSelectItem()}></div>
            : null
          }
          {
            item.chooseCount > 0
            ? <div className='count'>{item.chooseCount}</div>
            : null
          }
          <div className="plus" onClick={() => this.addSelectItem()}></div>
        </div>
      </div>
    )
  }
}

export default connect()(MenuItem)